body {
      background-image: url('../image/Soft Aesthetics Wallpaper.png'); /* Replace 'image/background.jpg' with your background image path */
      background-size: contain;
	  border: 1px solid rgba(221, 221, 221, 0.5);
      background-color: #f0f8ff;  /* Light blue background */
      font-family: 'Amatic SC', cursive; /* Or a similar light and airy font */
      color: #333;  /* Darker text color for better readability */
      margin: 0;
      padding: 0;
	 
    }
	
	header {
      background-color: #fffbf9; /* Off-white background */
      padding: 20px;
      text-align: center;
	  background-color: rgba(255, 255, 255, 0.8);  /* Semi-transparent white background */
	}
	
    h1 {
      font-size: 2rem;
      color:  #a94064; /* Pinkish red heading color */
      margin-bottom: 10px;
    }
    
	
    .intro {
      text-align: center;
      margin-top: 20px;
    }
	
    .intro p {
		text-align: center;
		margin-top: 20px;
		font-family: 'Playfair Display', serif;  /* Replace with your chosen font */
		font-size: 1.2rem;
		line-height: 1.5; /* More space between text lines */
		width: 70%; /* Limit intro text width for better layout on smaller screens */
		margin: 0 auto; /* Center the text horizontally */
		background-color: rgba(255, 255, 255, 0.8);  /* Semi-transparent white background */
		color: #333;  /* Darker text color for better readability */
		padding: 10px 20px;  /* Add some space between the text and the border */
    }
	
	/* Add navigation bar styles */
    .nav-bar {
      
      padding: 10px;
      text-align: center;
      margin-bottom: 20px;
    }

    .nav-bar a {
      text-decoration: none;
      color: #876e60; /* Dark brown text */
      margin: 10px;
    }

    .nav-bar a:hover {
      color: #a94064; /* Pinkish red heading color */
    }
	
	 /* Add clock and timetable styles */
    .clock-timetable-container {
      text-align: center;
      margin-top: 50px;
    }

    #clock {
	font-size: 50px;
	font-weight: bold;
	font-family: 'Digital-7', monospace;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #333; /* Dark gray background */
	color: #FFFFFF; /* Changed font color */
	border: 2px solid #444; /* Dark gray border */
	border-radius: 10px; /* Rounded corners */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow effect */
	text-shadow: 
		0 0 10px rgba(255, 255, 255, 0.5), 
		0 0 20px rgba(255, 255, 255, 0.3), 
		0 0 30px rgba(255, 255, 255, 0.1), 
		0 0 40px rgba(255, 255, 255, 0.05); /* Added multiple text shadows to make the font glowy */
	}

	#clock::before {
	content: attr(data-time);
	position: absolute;
	top: 0;
	left: 0;
	text-shadow: none;
	color: transparent;
	-webkit-text-stroke: 2px #a94064; /* Added text stroke to make the font sparkle */
	}

    .timetable {
      width: 50%;
      margin: 0 auto;
      border: 1px solid #e6b9ce; /* Light pink border */
      border-radius: 10px;
      background-color: #E5D0E3;
      padding: 15px;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
		border: 1px solid #d7d7d7; /* Light gray border */
		padding: 5px;
		text-align: center;
		font-size: 14px;
		font-family: 'Lato', sans-serif; /* Clean sans-serif font */
		color: #666; /* Dark gray text */
    }
	
	th {
		background-color: #ffe6f2; /* Soft pink background for headers */
		color: #333; /* Darker text for headers */
	}
	
	td {
		background-color: #f7f7f7; /* Soft white background for cells */
	}

	td:hover {
		background-color: #f2f2f2; /* Light gray hover effect */
	}
	
	/* CSC541 - light beige */
	.CSC541 {
		background-color: #F5F5DC;
		border: 2px solid #964B00;
		color: #333;
	}

	/* CSC566 - brown */
	.CSC566 {
		background-color: #964B00;
		border: 2px solid #452B1F;
		color: #FFFFFF;
	}

	/* ELC650 - pastel orange */
	.ELC650 {
		background-color: #FFC67D;
		border: 2px solid #FF9900;
		color: #333;
	}

	/* CSC508 - pastel purple */
	.CSC508 {
		background-color: #C7B8EA;
		border: 2px solid #7A288A;
		color: #333;
	}

	/* CSC584 - pastel yellow */
	.CSC584 {
		background-color: #F7DC6F;
		border: 2px solid #FFFF00;
		color: #333;
	}

	/* TAC451 - pastel green */
	.TAC451 {
		background-color: #B2FFFC;
		border: 2px solid #34C759;
		color: #333;
	}

	/* CSC577 - pastel peach */
	.CSC577 {
		background-color: #FFD7BE;
		border: 2px solid #FFC0CB;
		color: #333;
	}